<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正常圆环</title>
</head>

<body>
    <div class="view" style="width: 500px;height: 500px;">
        <!-- 正常圆环 -->
        <div id="handlerView" style="width: 100%;height: 100%;"></div>
    </div>

    <script src="./base_js/echarts.min.js"></script>
    <script>
        const roseViewDom = document.getElementById('handlerView')

        const roseChart = echarts.init(roseViewDom)
        // 定义了内部圆渐变颜色信息
        const innerGradient = new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
            { offset: 0, color: '#F6F9FF' },
            { offset: 0.91, color: '#F6F9FF' },
            { offset: 0.91, color: 'rgba(108, 137, 195, 0.01)' },
            { offset: 1, color: 'rgba(108, 137, 195, 0.30)' }
        ])
        const ROSE_DATA = [ // 数据格式
            {
                value: 5000,
                rate: 25,
                name: '王者荣耀',
                color: '#6ECDF9'
            },
            {
                value: 4300,
                rate: 22,
                name: '蛋仔派对',
                color: '#65B3FF'
            },
            {
                value: 3000,
                rate: 17,
                name: '刺激战场',
                color: '#5A93FC'
            },
            {
                value: 2867,
                rate: 15,
                name: '第五人格',
                color: '#9A86F3'
            },
            {
                value: 2167,
                rate: 13,
                name: '部落冲突',
                color: '#EB918E'
            },
            {
                value: 1876,
                rate: 9,
                name: '帝国时代',
                color: '#EFAD76'
            }
        ]
        // 当前索引值
        let currentIndex = 0
        const chartOptions = {
            tooltip: { // 提示框组件
                trigger: 'item' // 数据项图形触发
            },
            legend: { // 图例组件
                show: false // 不展示
            },
            series: [
                {
                    type: 'pie', // 类型
                    radius: ['75%', '90%'], // 饼图展示部分
                    avoidLabelOverlap: false, // 是否启用防止标签重叠策略
                    padAngle: 5, // 饼图扇区之间的间隔角度
                    itemStyle: { 
                        borderWidth: 5, // 描边线宽，为 0 时无描边。
                        borderColor: '#FFFFFF' // 描边线颜色
                    },
                    label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息
                        show: false, // 
                        position: 'center',
                        formatter: (params) => {
                            const { rate, name } = params.data
                            return `
{rate|${rate}%}

{name|${name}}
        `
                        },
                        rich: {
                            rate: {
                                fontWeight: 'bold',
                                fontSize: '24',
                                color: '#333333'
                            },
                            name: {
                                fontWeight: '500',
                                fontSize: '14',
                                color: '#666666'
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: ROSE_DATA.map(item => {
                        return { ...item, itemStyle: { color: item.color } }
                    })
                },
                {
                    type: 'pie',
                    color: innerGradient,
                    radius: ['0%', '65%'],
                    emphasis: {
                        disabled: true
                    },
                    tooltip: {
                        show: false
                    },
                    data: [
                        { value: 0, itemStyle: { color: innerGradient } }
                    ]
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        chartOptions && roseChart.setOption(chartOptions)
        roseChart.resize()
        window.addEventListener('resize', () => {
            roseChart.resize()
        })
        roseChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0, // series 数据数组第几个
            dataIndex: currentIndex
        })
        roseChart.on('mouseover', e => {
            if (e.seriesIndex != 0) {
                return
            }
            //取消默认高亮
            roseChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            })
            currentIndex = e.dataIndex //将当前高亮的序号记录下来
            //鼠标悬停位置高亮
            roseChart.dispatchAction({
                type: 'highlight',
                seriesIndex: e.seriesIndex,
                dataIndex: e.dataIndex
            })
        })
    </script>
</body>

</html>